<template>
    <el-select v-model="selected" :placeholder="placehoder" filterable clearable @change="onchange" :disabled="disabled">
        <el-option v-for="item in items" :key="item.id" :label="item.name" :value="item.id" :value-key="item.id">
            <div class="option">
                {{ item.name }}<span>{{ item.phone }}</span>
            </div>
        </el-option>
    </el-select>
</template>

<script>
import _api from "@/common/api/employee.js";

export default {
    props: {
        value: {
            type: Number | null,
            default: null,
        },
        placehoder: {
            type: String,
            default: "请选择员工",
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },

    watch: {
        value() {
            this.selected = this.value;
        },
    },

    data() {
        return {
            items: [],
            selected: this.value,
        };
    },


    methods: {
        onchange(value) {
            // const item = this.items.filter(f => value == f.id)[0]
            // console.log(item.name, item.phone);
            this.$emit("input", value);
        },

        async getItems() {
            const result = await _api.getListAsync({
                page_size: 999,
            });

            // this.items = result.data.map((m) => ({ id: m.id, name: m.name }));
            this.items = result.data;
        },
    },

    mounted() {
        this.getItems();
    },
};
</script>

<style lang="scss" scoped>
.option {
    display: flex;
    justify-content: space-between;

    span {
        font-size: 1rem;
        color: #999;
    }
}
</style>